<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
    <script type="text/javascript" src="../common/echarts.min.js"></script>
    <!-- <script type="text/javascript" src="js/barChart.js"></script> -->
    <title>物流设备OEE</title>
</head>

<body>
    <div class="border-container">
        <div class="name-title tile-size-color">
            物流设备OEE
        </div>
        <div class="graduateyear">
            <div id="barChart"></div>
        </div>
    </div>

    <script type="text/javascript">
        //获取6天日期
        document.addEventListener('DOMContentLoaded', function () {
            function generateDateRanges(days) {
                const dateRanges = [];
                const now = new Date();
                for (let i = 0; i < days; i++) {
                    const startDate = new Date(now);
                    startDate.setDate(now.getDate() - days + i);
                    const startDay = startDate.toISOString().split('T')[0];
                    dateRanges.push(`${startDay}`);
                }
                return dateRanges;
            }

            function logisticsEquipment() {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: '/les/BillboardReportController/getDeviceInfo', // 后端接口地址
                        type: 'GET',
                        dataType: 'json',
                        success: function (res) {
                            if (res.retCode === '200') {
                                resolve(res);
                            } else {
                                reject(new Error(res.message));
                            }
                        },
                        error: function (xhr, status, error) {
                            reject(error);
                        }
                    });
                });
            }

            const stackerData = [];
            const agvData = [];
            let dateRanges = [];

            // 查询数据
            async function getDatas() {
                logisticsEquipment().then(res => {
                    if (res.retCode === '200') {
                        const data = res.responseBody;

                        // 按日期排序
                        const sortedData = data.sort((a, b) => new Date(a.day) - new Date(b.day));

                        // 构建设备类型映射
                        const stackerMap = {};
                        const agvMap = {};

                        sortedData.forEach(item => {
                            const date = item.day;
                            const total = parseInt(item.total, 10);

                            if (item.deviceType === '1') {
                                stackerMap[date] = total;
                            } else if (item.deviceType === '2') {
                                agvMap[date] = total;
                            }
                        });

                        // 获取最近7天日期范围
                        const dateRanges = generateDateRanges(7);

                        // 填充数据（缺省补0）
                        window.stackerData = dateRanges.map(date => stackerMap[date] || 0);
                        window.agvData = dateRanges.map(date => agvMap[date] || 0);
                        window.dateRanges = dateRanges;

                        // ✅ 数据准备好后更新图表
                        updateChartCore();
                    }
                }).catch(err => {
                    console.error('获取数据失败:', err);
                });
            }

            function updateChartCore() {
                var option = {
                    title: {
                        text: '使用次数统计',
                        left: '5%', // 调整到yAxis的上方
                        textStyle: {
                            color: '#b7b7b9'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        x: 'right',
                        data: ['堆垛机', 'AGV'],
                        textStyle: {
                            color: '#C5F1FF'
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: window.dateRanges,
                            axisLabel: {
                                color: '#b7b7b9'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#b7b7b9'
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                color: '#b7b7b9' // 设置刻度标签颜色为天蓝色
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#b7b7b9' // 设置轴线颜色为天蓝色
                                }
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    series: [
                        {
                            name: '堆垛机',
                            type: 'bar',
                            data: window.stackerData,
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.55, // 上半截天蓝色
                                            color: 'skyblue'
                                        },
                                        {
                                            offset: 0.8, // 下半截三分之一蓝色
                                            color: '#5563FF'
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#C5F1FF',
                                fontSize: 12
                            },
                            // markPoint: {
                            // 	data: [
                            // 		{ type: 'max', name: '最大值' },
                            // 		{ type: 'min', name: '最小值' }
                            // 	]
                            // },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值', label: { textStyle: { color: '#C5F1FF' } } }
                                ]
                            }
                        },
                        {
                            name: 'AGV',
                            type: 'bar',
                            data: window.agvData,
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.25, // 上半截浅红色
                                            color: '#ccf0bbac'
                                        },
                                        {
                                            offset: 0.25, // 渐变开始
                                            color: '#ccf0bbac'
                                        },
                                        {
                                            offset: 1, // 下半截红色
                                            color: '#8df45ee4'
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#C5F1FF',
                                fontSize: 12
                            },
                            // markPoint: {
                            // 	data: [
                            // 		{ name: '最大值', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                            // 		{ name: '最小值', value: 2.3, xAxis: 11, yAxis: 3 }
                            // 	]
                            // },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值', label: { textStyle: { color: '#C5F1FF' } } }
                                ]
                            }
                        }
                    ]
                };
                barChart.setOption(option)
            };
            var barChart = echarts.init(document.getElementById('barChart'));
            function updateChart() {
                getDatas(); // 请求数据并自动更新图表
            }

            // 或者首次初始化时也加载一次
            getDatas();

            // 设置定时器，每天凌晨0点更新数据
            function setMidnightUpdate() {
                const now = new Date();
                const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
                const timeUntilMidnight = midnight - now;

                setTimeout(() => {
                    getDatas(); // 改为只调用 getDatas，避免重复调用 updateChart
                    setMidnightUpdate();
                }, timeUntilMidnight);
            }

            setMidnightUpdate();

        });
    </script>
</body>

</html>